<template>
    <div>
        <div class="right">
            <span style="margin-right: 12px">
                <el-popover placement="bottom" width="317" trigger="click">
                    <i slot="reference" class="el-icon-bell" style="font-size: 24px; cursor:pointer;"></i>
                    <el-tabs v-model="notificationActive">
                        <el-tab-pane label="全部" name="first">
                            <div class="handle">
                                <div class="btn">
                                    <i class="el-icon-check"></i>
                                    一键标为已读
                                </div>
                                <div class="btn">
                                    <i class="el-icon-view"></i>
                                    查看全部
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="教学活动" name="second">
                            <div class="handle">
                                <div class="btn">
                                    <i class="el-icon-check"></i>
                                    一键标为已读
                                </div>
                                <div class="btn">
                                    <i class="el-icon-view"></i>
                                    查看全部
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="教务通知" name="third">
                            <div class="handle">
                                <div class="btn">
                                    <i class="el-icon-check"></i>
                                    一键标为已读
                                </div>
                                <div class="btn">
                                    <i class="el-icon-view"></i>
                                    查看全部
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="系统通知" name="fourth">
                            <div class="handle">
                                <div class="btn">
                                    <i class="el-icon-check"></i>
                                    一键标为已读
                                </div>
                                <div class="btn">
                                    <i class="el-icon-view"></i>
                                    查看全部
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-popover>
            </span>
            <span style="margin-right: 12px">
                <el-dropdown trigger="click">
                    <span class="el-dropdown-link userinfo">
                        <img class="avatar" style="display: block;width: 32px;height: 32px;"
                            src="../../assets/homePage/26.png" alt="userImg">
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <i class="el-icon-postcard"></i>
                            开通VIP
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <i class="el-icon-link"></i>
                            机构用户认证
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <div @click="toUserSetting()">
                                <i class="el-icon-setting"></i>
                                个人设置
                            </div>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <div @click="logout">
                                <i class="el-icon-user"></i>
                                退出账户
                            </div>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui';

export default {
    name: "HeaderRight",
    data() {
        return {
            notificationActive: 'first',
        }
    },
    methods: {
        toUserSetting() {
            // 路径判断，不相同才跳转
            if (this.$router.history.current.path !== '/userSetting') {
                this.$router.push('/userSetting')
            }
        },
        logout() {
            this.$confirm('', '您确定要退出吗?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                Message.success("退出成功");
                localStorage.setItem('loginStatus', '0');
                localStorage.setItem('Token', '');
                this.$router.push('/');
                // this.$store.dispatch('logout');
            }).catch(() => {
            });
        },
    },
}
</script>

<style scoped lang="less">
.right {
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
}

.handle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: #4285f4;
    line-height: 20px;

    .btn {
        cursor: pointer;
        width: 50%;
        height: 50px;
        line-height: 50px;
    }

    .userinfo {
        cursor: pointer;
        margin-right: 12px;
        display: inline-block;
        position: relative;

        .avatar {
            border-radius: 50%;
        }
    }

    .el-dropdown-item {
        display: block;
    }
}
</style>
=======
<!--<template>-->
<!--    <div>-->
<!--        <div class="right">-->
<!--            <span style="margin-right: 12px">-->
<!--                <el-popover placement="bottom" width="317" trigger="click">-->
<!--                    <i slot="reference" class="el-icon-bell" style="font-size: 24px; cursor:pointer;"></i>-->
<!--                    <el-tabs v-model="notificationActive">-->
<!--                        <el-tab-pane label="全部" name="first">-->
<!--                            <div class="handle">-->
<!--                                <div class="btn">-->
<!--                                    <i class="el-icon-check"></i>-->
<!--                                    一键标为已读-->
<!--                                </div>-->
<!--                                <div class="btn">-->
<!--                                    <i class="el-icon-view"></i>-->
<!--                                    查看全部-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </el-tab-pane>-->
<!--                        <el-tab-pane label="教学活动" name="second">-->
<!--                            <div class="handle">-->
<!--                                <div class="btn">-->
<!--                                    <i class="el-icon-check"></i>-->
<!--                                    一键标为已读-->
<!--                                </div>-->
<!--                                <div class="btn">-->
<!--                                    <i class="el-icon-view"></i>-->
<!--                                    查看全部-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </el-tab-pane>-->
<!--                        <el-tab-pane label="教务通知" name="third">-->
<!--                            <div class="handle">-->
<!--                                <div class="btn">-->
<!--                                    <i class="el-icon-check"></i>-->
<!--                                    一键标为已读-->
<!--                                </div>-->
<!--                                <div class="btn">-->
<!--                                    <i class="el-icon-view"></i>-->
<!--                                    查看全部-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </el-tab-pane>-->
<!--                        <el-tab-pane label="系统通知" name="fourth">-->
<!--                            <div class="handle">-->
<!--                                <div class="btn">-->
<!--                                    <i class="el-icon-check"></i>-->
<!--                                    一键标为已读-->
<!--                                </div>-->
<!--                                <div class="btn">-->
<!--                                    <i class="el-icon-view"></i>-->
<!--                                    查看全部-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </el-tab-pane>-->
<!--                    </el-tabs>-->
<!--                </el-popover>-->
<!--            </span>-->
<!--            <span style="margin-right: 12px">-->
<!--                <el-dropdown trigger="click">-->
<!--                    <span class="el-dropdown-link userinfo">-->
<!--                        <img class="avatar" style="display: block;width: 32px;height: 32px;"-->
<!--                            src="../../assets/homePage/26.png" alt="userImg">-->
<!--                    </span>-->
<!--                    <el-dropdown-menu slot="dropdown">-->
<!--                        <el-dropdown-item>-->
<!--                            <i class="el-icon-postcard"></i>-->
<!--                            开通VIP-->
<!--                        </el-dropdown-item>-->
<!--                        <el-dropdown-item>-->
<!--                            <i class="el-icon-link"></i>-->
<!--                            机构用户认证-->
<!--                        </el-dropdown-item>-->
<!--                        <el-dropdown-item>-->
<!--                            <div @click="toUserSetting()">-->
<!--                                <i class="el-icon-setting"></i>-->
<!--                                个人设置-->
<!--                            </div>-->
<!--                        </el-dropdown-item>-->
<!--                        <el-dropdown-item>-->
<!--                            <div @click="logout">-->
<!--                                <i class="el-icon-user"></i>-->
<!--                                退出账户-->
<!--                            </div>-->
<!--                        </el-dropdown-item>-->
<!--                    </el-dropdown-menu>-->
<!--                </el-dropdown>-->
<!--            </span>-->
<!--        </div>-->
<!--    </div>-->
<!--</template>-->
<!--  -->
<!--<script>-->
<!--import { Message } from 'element-ui';-->

<!--export default {-->
<!--    name: "HeaderRight",-->
<!--    data() {-->
<!--        return {-->
<!--            notificationActive: 'first',-->
<!--        }-->
<!--    },-->
<!--    methods: {-->
<!--        toUserSetting() {-->
<!--            // 路径判断，不相同才跳转-->
<!--            if (this.$router.history.current.path !== '/userSetting') {-->
<!--                this.$router.push('/userSetting')-->
<!--            }-->
<!--        },-->
<!--        logout() {-->
<!--            this.$confirm('', '您确定要退出吗?', {-->
<!--                confirmButtonText: '确定',-->
<!--                cancelButtonText: '取消',-->
<!--                type: 'warning',-->
<!--                center: true-->
<!--            }).then(() => {-->
<!--                Message.success("退出成功");-->
<!--                this.$router.push('/');-->
<!--                this.$store.dispatch('logout');-->
<!--            }).catch(() => {-->
<!--            });-->
<!--        },-->
<!--    },-->
<!--}-->
<!--</script>-->

<!--<style scoped lang="less">-->
<!--.right {-->
<!--    cursor: pointer;-->
<!--    text-align: center;-->
<!--    display: flex;-->
<!--    align-items: center;-->
<!--}-->

<!--.handle {-->
<!--    display: flex;-->
<!--    justify-content: space-between;-->
<!--    align-items: center;-->
<!--    font-size: 14px;-->
<!--    font-weight: 500;-->
<!--    text-align: center;-->
<!--    color: #4285f4;-->
<!--    line-height: 20px;-->

<!--    .btn {-->
<!--        cursor: pointer;-->
<!--        width: 50%;-->
<!--        height: 50px;-->
<!--        line-height: 50px;-->
<!--    }-->

<!--    .userinfo {-->
<!--        cursor: pointer;-->
<!--        margin-right: 12px;-->
<!--        display: inline-block;-->
<!--        position: relative;-->

<!--        .avatar {-->
<!--            border-radius: 50%;-->
<!--        }-->
<!--    }-->

<!--    .el-dropdown-item {-->
<!--        display: block;-->
<!--    }-->
<!--}-->
<!--</style>-->
>>>>>>> origin/master
